<template>
  <div class="flx">
    <div class="g-tbl" id="wrap">
      <table class="table table-bordered text-center" ref="tbl">
        <thead id="th">
          <tr>
            <th class="text-center" style="padding: 15px 8px;">姓名:</th>
            <th class="text-center" style="padding: 15px 8px;">{{userName}}</th>
            <th class="text-center" style="padding: 15px 8px;">登记号:</th>
            <th class="text-center" style="padding: 15px 8px;">{{patientId}}</th>
          </tr>
         
          <tr>
            <!-- <th colspan="1" style="text-align:right;">
              请选择查询月份
            </th> -->
            <th colspan="4" style="text-align:center;">
              <!-- <button type="button" class="btn btn-default" @click="selectDate">选择日期:</button> -->
              <div class="m-flxTime">
                <span class="m-date">请选择时间:</span>
                <vue-ios-pickers
                  placeholder="请选择时间"
                  date="date"
                  :cols="2"
                  :on-confirm="confirmHandler"
                  v-model="datetimePicker"
                ></vue-ios-pickers>
              </div>
            </th>
          </tr>
          <tr>
            <th colspan="2" class="text-center" style="padding: 15px 8px;">就诊日期</th>
            <th class="text-center" style="padding: 15px 8px;">就诊医生</th>
            <th class="text-center" style="padding: 15px 8px;">就诊科室</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in ret" @click='checkDetail(item)' :key="index">
            <td colspan="2" :style="{height:mh+'px'}">{{item.admDate}}</td>
            <td>{{item.admDoctor}}</td>
            <td>{{item.admLoc}}</td>
        </tr>
        </tbody>
      </table>
    </div>
    <ul class="pager" style="margin: 10px 0;">
      <li>
        <a href="javascript:;" @click="prev">上一页</a>
      </li>
      <li>
        {{currentPage+'/'+totalPage}}
      </li>
      <li>
        <a href="javascript:;" @click="next">下一页</a>
      </li>
    </ul>
    <!-- loading -->
<div v-if="loading" class="modal" id="loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop='static'>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">加载中</h4>
      </div>
      <div class="modal-body">
        请稍候。。。<span id="result"></span>
      </div>
    </div>
  </div>
</div>
<!-- <calendar  :defaultDate="defaultDate" :show.sync="show" :mode="mode" @change="onChange"/> -->

  </div>
</template>
<script>
export default {
  data() {
    return {
      ml: 0,
      mh: 40,
      list: [],
      pageSize:4,
      totalPage:1,
      currentPage:1,
      ret: null,
      cur: 1,
      loading:false,
      patientId:'',
      userName: '',
      show: false,
      mode: 'during',
      startDate: '',
      endDate: '',
      // defaultDate:['2020-06-25','2020-07-09']
     datetimePicker: '2020-07',
    };
  },
  created() {
  },
  mounted() {
    this.getCurrentMonth()
    console.log(document.querySelector('#wrap').offsetHeight-document.querySelector('#th').offsetHeight)
    const th=document.querySelector('#wrap').offsetHeight-document.querySelector('#th').offsetHeight
    while(th%this.mh>5){
        this.mh++;
        this.pageSize=Math.floor(th/this.mh)
        console.log(this.ml)
    }
    var date=new Date()
    this.getFirstDay(date)
    this.getEndDay(date)
    this.getList()
    // console.log(this.mh)
  },
  methods: {
    selectDate() {
      this.show = true;
   
    },
    getList(){
      this.$store.commit('setLoading',true)
      let start = this.startDate
      let end = this.endDate
      this.$api.getList(start,end).then(res=>{
        this.$store.commit('setLoading',false)
        console.log("返回值:",res)
        this.loading=false;
        this.list=res.data.list;
        this.userName = res.data.lntWxMpPatient.patId.patientName
        this.patientId = res.data.lntWxMpPatient.patientid
        // this.user=res.data.lntWxMpPatient
        if(this.list.length>this.pageSize){
          this.totalPage=Math.ceil(this.list.length/this.pageSize)
        }else{
          this.totalPage=1;
        }
        this.currentShow()
      })
    },
    onChange(date) {
      console.log(date.format('YY-MM-DD'));
    },
    currentShow(){
      let begin=(this.currentPage-1)*this.pageSize;
      console.log('currentPage:',this.currentPage,'pageSize:',this.pageSize)
      let end=this.currentPage*this.pageSize;
      this.ret=this.list.slice(begin,end)
    },
    prev() {
      if(this.currentPage==1) return;
      this.currentPage--;
      this.currentShow()
    },
    next() {
      if(this.currentPage==this.totalPage) return;
      this.currentPage++;
      this.currentShow()
    },
    checkDetail(row) {
      console.log("选中的行:",row)
      this.$router.push({ name:"detail",query:{admRowid:row.admRowid,admDate:row.admDate,patientId:this.patientId,userName:this.userName}});
    },
     confirmHandler(result) {
       console.log("当前月份:",result.strIds)
       var curYear = result.obj[0].id
       var curMonth = result.obj[1].id
       console.log("当前年:"+curYear+"当前月:"+curMonth)
       var date = new Date(curYear,curMonth,0)
       this.getFirstDay(date)
       this.getEndDay(date)
       this.getList()
      },
      getFirstDay(date){
        date.setDate(1);
        var month = parseInt(date.getMonth()+1);
        var day = date.getDate();
        if (month < 10) {
            month = '0' + month
        }
        if (day < 10) {
            day = '0' + day
        }
        var startTime = date.getFullYear() + '-' + month + '-' + day
        this.startDate = startTime
      },
      getEndDay(date){
        var currentMonth=date.getMonth();
        var nextMonth=++currentMonth;
        var nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1);
        var oneDay=1000*60*60*24;
        var lastTime = new Date(nextMonthFirstDay-oneDay);
        var endmonth = parseInt(lastTime.getMonth()+1);
        var endday = lastTime.getDate();
        if (endmonth < 10) {
            endmonth = '0' + endmonth
        }
        if (endday < 10) {
            endday = '0' + endday
        }
        var endTime = date.getFullYear() + '-' + endmonth + '-' + endday
        this.endDate = endTime
      },
      getCurrentMonth() {
        let nowDate = new Date()
        let date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          date: nowDate.getDate()
        }
        if(date.month < 10) {
          date.month = '0' + date.month
        }
        this.datetimePicker = date.year + '-' + date.month
        console.log('curr month',this.datetimePicker)
      }
  }
};
</script>
<style scoped>
.flx {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.table thead{
  background-color:#337ab7 ;
  color: #ffffff;
}
.table thead th{
  border-color: #337ab7;
}
.g-tbl {
  flex: 1;
  overflow: hidden;
}
.pager {
  flex-shrink: 0;
}
.table>tbody>tr>td{
  vertical-align: middle!important;
}
.pager li{
  margin: 5px;
}
.modal{
  display: block!important;
}

</style>

<style>
/* 添加 */
::-webkit-input-placeholder { /* WebKit browsers */
  color: #ffffff;
}
.flx .vue-ios-pickers{
  width: 100px!important;
}
.m-flxTime{
  line-height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.picker-value::after{
  border-top:1px solid #ffffff!important;
  border-right:1px solid #ffffff!important;
}
</style>